<script setup lang="ts">
import { ref, watch } from 'vue'

interface Props {
  modelValue?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false
})

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void
}>()

const collapse = ref<boolean>(false)
const collapseIcon = ref(false)

watch(
  () => props.modelValue,
  (newVal) => {
    collapse.value = newVal
  },
  {
    immediate: true
  }
)

const handleChange = () => {
  collapse.value = !collapse.value
  emit('update:modelValue', collapse.value)
}

watch(collapse, (newVal) => {
  setTimeout(() => {
    collapseIcon.value = newVal
  }, 500)
})
</script>

<template>
  <div class="menu-collapse-wrapper" @click="handleChange">
    <SvgIcon v-if="collapseIcon" icon="collapse-close" class-name="menu-collapse-icon"></SvgIcon>
    <SvgIcon v-else icon="collapse-open" class-name="menu-collapse-icon"></SvgIcon>
  </div>
</template>

<style lang="scss" scoped>
.menu-collapse-wrapper {
  width: auto;
  height: auto;
  cursor: pointer;
  :deep(.menu-collapse-icon) {
    width: 16px;
    height: 15px;
  }
}
</style>
